<template>
	<view class="banner-box">
		<view class="banner-bg" :style="{'background-image':`linear-gradient(${bannerBackground || '#345DC2'} 50%, #FFF)`}"></view>
		<swiper class="banner-swipper" indicator-dots 
		indicator-color="rgba(255, 255, 255, 0.5)" 
		indicator-active-color="#FFFFFF"
		autoplay :interval="4000" :current="current"
		@change="swiperChange">
			<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
				<image :src="item.imageUrl"></image>
			</swiper-item>

			
			<!-- <swiper-item class="swiper-item">
				<image src="/static/images/it01.png"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="/static/images/it02.png"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="/static/images/it03.png"></image>
			</swiper-item> -->
		</swiper>
	</view>
</template>

<script>
	export default{
		props:{
			bannerList:{
				type:Array,
				default:() => [
					{
						id:1,
						imageUrl:'/static/images/it01.png',
						background:'#009B8C',
						advertUrl:'/pages/course/course-details'
					},{
						id:2,
						imageUrl:'/static/images/it02.png',
						background:'#6E3DE6',
						advertUrl:'/pages/course/course-details'
					},{
						id:3,
						imageUrl:'/static/images/it03.png',
						background:'#0D81ED',
						advertUrl:'/pages/course/course-details'
					}
				]
			}
		},
		data(){
			return{ 
				current:0, //当前所在滑块的index
				bannerBackground: '' //背景色
			}
		},
		methods:{
			swiperChange(e){
				this.current = e.detail.current
				this.bannerBackground = this.bannerList[this.current].background
				// console.log("e",e.detail.current)
				
			}
		}
	}
</script>

<style lang="scss">
	.banner-box{
		padding-top: 40rpx;
		.banner-bg{
			position: absolute;
			top: 0;
			width: 100%;
			height: 470rpx;
			background-image: linear-gradient(red 50%, #fff);
			transform: .5s;
		}
		.banner-swipper{
			width: 100%;
			height: 350rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>